
<template>
	<view class="container">
	  <view class="info-box">
	    <view style="text-align: center;margin-bottom:10%;">
	      <!-- <image class="avatar-img" src="{{avatarUrl}}" /> -->
		  <image class="avatar-img" :src="avatarUrl"></image>
	    </view>
	    <text>姓名： {{userName}}</text>
		<text>用户ID：{{userId}}</text>
	    <text>性别： {{sex}}</text>
	    <text>年龄： {{age}}</text>
	    <text>电话： {{phone}}</text>
		<text>身份： {{authority}}</text>
		<view style="text-align: center;margin-top: 10%; margin-left: 35%;margin-right: 35%;">
			<navigator url="../inforModify/inforModify"><button size="mini" type="primary">修改信息</button></navigator>
			<view v-if="bool">
				<navigator url="../administrator/administrator"><button size="mini" type="primary">进入管理</button></navigator>
			</view>
		</view>		
	 </view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello',
				userName:"",
				userId:"",
				sex:"",
				age:"",
				phone:"",
				avatarUrl:'',
				bool:"",
				authority:""
			}
		},
		onLoad() {
			uni.request({
				url:"http://rap2api.taobao.org/app/mock/286869/personal/information",
				method:'GET',
				data:{},
				success:res=>{
					if(res.data.authority==0){
						this.bool=false;
						this.authority="普通用户";
					}else{
						this.bool=true;
						this.authority="管理员";
					}
					this.userName=res.data.userName;
					console.log(res.data.userName);
					this.userId=res.data.userId;
					console.log(res.data.userId);
					this.sex=res.data.sex;
					if(res.data.sex==1){
						console.log("男");
					}else{
						console.log("女");
					}
					this.age=res.data.age;
					console.log(res.data.age);
					this.phone=res.data.phone;
					console.log(res.data.phone);
					this.avatarUrl=res.data.avatarUrl;
					console.log(res.data.avatarUrl);
					
				}
			})
		
		},
		methods: {
	
		}
	}
</script>

<style>
	.info-box{
	  width: 100%;
	  height: 100%;
	  display: flex;
/* 	  text-align: center;
 */	  /* border-radius: 10px; */
	  flex-direction: column;
	  justify-content: center;
	  background-color: #fff;
	  align-items: center;
	},
	.avatar-img {
	  width: 100px;
	  height: 100px;
	  border: 1px solid gray;
	},
	.info-box>text{
	  display: block;
	  margin-left: 1%;
	  margin-top: 4%;
	  /* border: 2rpx solid #000000;
	  border-right:2rpx solid #000000; */
	  border-bottom: 1rpx solid #8799A3;
	}
	
</style>

